<script setup lang="ts">
import HomePanel from '@/views/home/components/home-panel.vue';
import type { topSort } from '@/types/index';
import type { PropType } from 'vue';
defineProps({
  goods: {
    type: Object as PropType<topSort>,
    required: true,
  },
});
</script>
<template>
  <div>
    <HomePanel style="margin-top: 20px" :cateTitle="'- ' + goods.name + ' -'">
      <template v-slot:right>
        <XtxMore path="/" style="width: 180px"></XtxMore>
      </template>
      <template v-slot:body>
        <ul class="goods-list">
          <li v-for="item in goods.goods" :key="item.id" class="item">
            <RouterLink :to="`/product/${item.id}`">
              <img :src="item.picture" alt="" />
              <p class="name ellipsis">{{ item.name }}</p>
              <p class="desc ellipsis">{{ item.desc }}</p>
              <p class="price">&yen;{{ item.price }}</p>
            </RouterLink>
          </li>
        </ul>
      </template>
    </HomePanel>
  </div>
</template>
<style lang="less" scoped>
.goods-list {
  padding: 0 65px 30px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  // height: 406px;
  li {
    padding: 20px 30px;
    text-align: center;
    width: 220px;
    // background: #f0f9f4;
    .hoverShadow();
    img {
      width: 160px;
      height: 160px;
    }
    p {
      font-size: 16px;
      padding-top: 10px;
      text-align: center;
      &.desc {
        color: #999;
        font-size: 14px;
      }
    }
    .price {
      color: @priceColor;
    }
  }
}
</style>
